/* 
    Document   : style
    Created on : 14-07-2013, 21:26:03
    Author     : LVTD
    Description:
        Purpose of the stylesheet follows.
*/

/*root { 
    display: block;
}*/
*{
    margin: 0; padding: 0;
}
html{
    display: block;
}
body
{
    font-family: Arial, Helvetica, sans-serif;
    min-width: 1000px;
    position:relative;
}
a.am_mini_link{
    font-size: 12px;
    color: #8cc2ff;
    text-decoration: none;
    font-style: italic;
}
a.am_mini_link:hover{
    text-decoration: underline;
}
/*--------------------------------- banner -----------------------------------*/
.am_banner_wrapper{
}
#am_canvas_light{
    overflow: hidden;
}
/*for banner*/
.am_banner{
    /*position: relative;   --nếu có, ball sẽ bị lỗi 2ô trên-phải */

    /* transform:rotate(7deg);
    -ms-transform:rotate(7deg);  IE 9 
    -webkit-transform:rotate(7deg);  Safari and Chrome 
    transform: scale(0.5);  Firefox 
    -ms-transform: scale(0.5);  IE9 
    -webkit-transform: scale(0.5);   Safari and Chrome */

    position: relative;  
    background: transparent;
    width: 1222px; /* 12col + 11 line */
    height: 458px;
    overflow: hidden;
    transform-origin: 0px 0px;  /* dành cho firefox */
    -webkit-transform-origin: 0px 0px;
}
.am_banner_underlight{
    position: absolute;
    margin: 0px;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    right: auto;
    bottom: auto;
}
/*---------------------------*/
.am_banner_items{
    position: absolute;
    /*margin: 0px;*/
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    right: auto;
    bottom: auto;
    /*-webkit-tap-highlight-color: rgba(0, 0, 0, 0);*/

    background-color: transparent;
    /* -- mask --*/
    -webkit-mask-image: url(images/mask_grid.png);
}
.am_banner_item{
    position: absolute;
    right: auto;
    bottom: auto;
    margin: 0px;
    background-color: #000000;
    /*-webkit-tap-highlight-color: rgba(0, 0, 0, 0);*/
    /*-webkit-transform: translateZ(0);*/
}
.am_banner_item_01{ top: 0px;  left: 0px;  width: 202px; height: 90px;  background:#000000 url('images/banner_item/bi02.jpg') no-repeat center top; }
.am_banner_item_02{ top: 0px;  left: 204px; width: 100px;  height: 274px; background:#000000 url('images/banner_item/bi04.jpg') no-repeat center top; }
.am_banner_item_03{ top: 0px;  left: 306px; width: 100px;  height: 182px; background:#000000 url('images/banner_item/bi03.jpg') no-repeat center top; }
.am_logo{
    top: 0px;
    left: 408px;  /* 100x4 + 4x2 */
    width: 406px;   /* 100x4 + (4-1)x2 */
    height: 182px; /* 90x2 + (2-1)x2 */
}
.am_banner_item_04{ top: 0px;  left: 816px;  width: 202px;  height: 182px; background:#000000 url('images/banner_item/bi05.jpg') no-repeat center top; }
.am_banner_item_05{ top: 0px;   left: 1020px;  width: 100px;  height: 182px; background:#000000 url('images/banner_item/bi03.jpg') no-repeat center top; }
.am_banner_item_06{ top: 0px; left: 1122px;  width: 100px;  height: 90px; background:#000000 url('images/banner_item/bi01.jpg') no-repeat center top;  }

.am_banner_item_07{  top: 92px; left: 0px;  width: 202px;  height: 182px; background:#000000 url('images/banner_item/bi05.jpg') no-repeat center top;  }
.am_banner_item_08{  top: 92px; left: 1122px;  width: 100px;  height: 182px;  background:#000000 url('images/banner_item/bi03.jpg') no-repeat center top; }

.am_banner_item_09{  top: 184px; left: 306px;  width: 100px;  height: 182px; background:#000000 url('images/banner_item/bi03.jpg') no-repeat center top;  }
.am_banner_item_10{  top: 184px; left: 408px;  width: 202px;  height: 274px; background:#000000 url('images/banner_item/bi06.jpg') no-repeat center top;  }
.am_banner_item_11{  top: 184px; left: 612px;  width: 202px;  height: 182px; background:#000000 url('images/banner_item/bi05.jpg') no-repeat center top;  }
.am_banner_item_12{  top: 184px; left: 816px;  width: 100px;  height: 90px; background:#000000 url('images/banner_item/bi01.jpg') no-repeat center top;  }
.am_banner_item_13{  top: 184px; left: 918px;  width: 100px;  height: 182px; background:#000000 url('images/banner_item/bi03.jpg') no-repeat center top;  }
.am_banner_item_14{  top: 184px; left: 1020px;  width: 100px;  height: 90px; background:#000000 url('images/banner_item/bi01.jpg') no-repeat center top;  }

.am_banner_item_15{  top: 276px; left: 0px;  width: 100px;  height: 182px; background:#000000 url('images/banner_item/bi03.jpg') no-repeat center top;  }
.am_banner_item_16{  top: 276px; left: 102px;  width: 100px;  height: 90px; background:#000000 url('images/banner_item/bi01.jpg') no-repeat center top;  }
.am_banner_item_17{  top: 276px; left: 204px;  width: 100px;  height: 90px; background:#000000 url('images/banner_item/bi01.jpg') no-repeat center top;  }
.am_banner_item_18{  top: 276px; left: 816px;  width: 100px;  height: 182px; background:#000000 url('images/banner_item/bi03.jpg') no-repeat center top;  }
.am_banner_item_19{  top: 276px; left: 1020px;  width: 202px;  height: 182px; background:#000000 url('images/banner_item/bi05.jpg') no-repeat center top;  }

.am_banner_item_20{  top: 368px; left: 102px;  width: 202px;  height: 90px; background:#000000 url('images/banner_item/bi02.jpg') no-repeat center top;  }
.am_banner_item_21{  top: 368px; left: 306px;  width: 100px;  height: 90px; background:#000000 url('images/banner_item/bi01.jpg') no-repeat center top;  }
.am_banner_item_22{  top: 368px; left: 612px;  width: 202px;  height: 90px; background:#000000 url('images/banner_item/bi02.jpg') no-repeat center top;  }
.am_banner_item_23{  top: 368px; left: 918px;  width: 100px;  height: 90px; background:#000000 url('images/banner_item/bi01.jpg') no-repeat center top;  }


/*------------------------------ media player --------------------------------*/
.am_mediaplayer{
    /*vì .am_similar_song có float - mà float ko thể tự giãn height*/
    height: 570px;
    width: 100%;
    margin-top: 10px;
}
.am_current_playlist{
    width: 65%;
    display: inline-block;
}
.am_similar_song{
    width: 34%;
    background: transparent;
    float: right;
}
.am_sml_song{
    margin: 15px 20px 0 0;
    border: 1px solid; 
    padding-bottom: 2px;
    border-radius: 0 0 5px 5px;
}
.am_sml_song_title{
    line-height: 1.5;
    margin: 10px 5px 0 5px;
    /*hỗ trợ position absolute cho tag a bên trong*/
    position: relative; 
    border-bottom: 1px solid; 
}
.am_sml_song_title a{
    position: absolute;
    right: 0;
    bottom: 0;
}
.am_sml_song_title span{
    font-size: 19px;
    opacity:0.6;
    filter:alpha(opacity=60);   
    margin-left: 10px;
}
.am_mediaplayer .am_similar_song .am_listsong{
    margin: 1px 0 0 0;
    border-top: 1px solid;
}
/*--------------------------- list song ------------------------------*/
.am_listmusic{
    /*height: 600px;*/
    width: 100%;
    margin-top: 20px;
    /*tam*/
    /*background: #fff;     
                            cuối cùng để kiểm tra   */
}
.am_categories{
    float: left;

    width: 230px;

    background: transparent;
    display: inline-block;


    /*       background: #8cc2ff;
            height: 350px;*/
    /*                                    cuối cùng để kiểm tra
    */

}
.am_categories .am_categories_item{
    font-size: 18px;
    margin: 0 5px 5px 20px;
    padding: 10px 20px;
    border: 1px solid;
    display: inline-block;
}
.am_listmusic_of_categories{
    margin: 0 20px 0 230px;
    border: 1px solid; 
    padding-bottom: 2px;
    border-radius: 5px;
    overflow: hidden;
}
.am_listmusic_song, 
.am_listmusic_album{
    background: transparent;
    float: left;
    /*kích thước cho phép tràn nội dung*/
    padding-bottom: 1000px;  
    margin-bottom: -1000px;
}
.am_listmusic_song{
    width: 39%;
    border-right: 1px solid;
    padding-right: 2px;
}
.am_listmusic_album{
    width: 60%;
    border-left: 1px solid;
    margin-left: 2px;
}

.am_listmusic .am_listmusic_of_categories .am_listmusic_song .am_listsong .am_listsong_item{
    border: none;
    border-bottom: 1px solid;
}
.am_listmusic .am_listmusic_of_categories .am_listmusic_song .am_listsong{
    padding-bottom: -1px;
    border-bottom: 1px solid;
    border-right: 1px solid;
}
.am_listmusic_song_footer{
    padding: 10px 10px 0 0;
    margin-bottom: 5px;
    float: right;
}
.am_listmusic_song .am_listmusic_song_footer{
    border-right: 1px solid;
}
/*album*/
.am_listmusic_album_g1{
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    margin: -1px 5px 0 10px;
}
.am_listmusic_album_g1:after { 
    /* dành cho phiên bản CSS3 
    -- nếu ko có lỗi có thể bỏ qua
    -- là nguyên nhân làm tăng height g1*/
    content: '';
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

.am_listmusic_album_item{
    width: 120px;
    text-align: center;
    display: inline-block;
    margin: 20px 5px 5px 5px;
}
.am_listmusic_album_item_blind{
    width: 120px;
    height: 0;
    text-align: center;
    display: inline-block;
    margin: 0 5px 0 5px;
    padding: 0;
    /*                *display: inline;
                    zoom: 1;*/
}
.am_listmusic_album_item_link{

}
.am_listmusic_album_item_link a{
    text-decoration: none;
}
.am_listmusic_album_item_avatar img{
    padding: 3px;
    border: 1px solid #555;
    border-radius: 2px;
}
.am_listmusic_album_item_name{
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 1px;
}
.am_listmusic_album_item_singer{
    text-align: left;
    margin-left: 10px;
    padding-left: 22px;
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
}
.am_listmusic_album_item_functionButton{
    border-bottom: 1px solid;
    border-top: 1px solid;
    margin: 3px 1px 0 1px;
}
.am_listmusic_album_item_functionButton .am_listenSong, 
.am_listmusic_album_item_functionButton .am_addSongToList{
    height: 20px;   
}
.am_listmusic_album_item_functionButton .am_separator{
    line-height: 1.7;
}
.am_listsong_item_functionButton a,
.am_listmusic_album_item_functionButton a{
    text-decoration: none;
}


/*--------------------------- common list music ------------------------------ */ 
.am_listsong_item{
    margin: 1px 10px 0 10px;
    border-top: 1px solid; 
    padding: 10px 0 0 10px;
}
.am_listsong_item_g2:hover{
    border-left: 3px solid;
}
.am_listsong_item_g1{
    display: inline-block;
}
.am_listsong_item_song a{
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    text-decoration: none;
}
.am_listsong_item_song a:hover{
}
.am_listsong_item_singer{
    margin-left: 2px;
    padding-left: 22px;
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
}
.am_listsong_item_functionButton{
    float: right;
    padding-right: 10px;
}
.am_separator{
    font-size: 12px;
    opacity:0.6;
    filter:alpha(opacity=60); 
    display: inline-block;
    line-height: 3;
}
.am_listenSong, 
.am_addSongToList{
    display: inline-block;
    vertical-align: bottom;
}
.am_listenSong{
    width: 17px;
    height: 36px;
}
.am_addSongToList{
    width: 14px;
    height: 36px;
}
a .am_listenSong, 
a .am_addSongToList{
    color: transparent;
    font-size: 0px;
}
a:hover .am_listenSong , 
a:hover .am_addSongToList{
    color: transparent;
}


/*---------------------------------- footer  --------------------------------*/


.am_footer{
    margin-top: 30px;
    padding: 20px 10px 10px 10px;
    border-top: 3px double;
    font-size: 13px;
}